30天成爲Laravel萌新（第13天）- 簡易Blog頁面(下)

11th鐵人賽

lagagain

2019-09-30 18:35:02

1417 瀏覽

分享至

昨天利用亂數文章(Lorem ipsum)產生了@section('body')的預設內容。今天，要在Route把變數$content設成類似的亂數文章。

中文亂數文章

Lorem最多的資源大多還是英文，不過中文也有不少資源可以使用。此外，有些情況使用設計好的預設文字可能會更適合。今天，就只是想來用用而已。透過亂數假文產生器 Chinese Lorem Ipsum可以產生中文亂數文章，也可以用於產生標題。現在來簡單的把$title設成日的及度加機子魚年。$content設成：

身主一？是字對一日國地包最中感行物評民活於力！進上城大、很會英我：的樣基覺型家海當期是著：算像系大心樣十因天特企以加想點以後許，念落是客我什在白實文種運明市下只能當作力美間要速包企以統推多，收什火投，顧外。

指的司之身鄉然說小人發，我雜人轉英臺區實說麼後男會友大，阿產效第續明造識竟自沒大上有。到全藝地港為精件連需，過聯排可然更友我後們時？一風了組麼兒比、方來出科！車卻讀力風人父資國個年愛成故作自功：原用中有、港看車我高心打！親北受活女微特利動果的無何片經物……象巴約得？色時值壓五……過點子得提圖陽可計，來麼室拉的合天！人觀難一手樹以防黃精也需被那部我冷不不連痛以哥多人事營件、目熱而夫加……紀味曾蘭不好空農後電題熱頭國：戲識者是相大覺光，雙命影心可那？前區孩增，物時。

產明物力區有王真？院見很原，經總萬官方，生回。

海在康代界積實兒變：她哥出邊。善快寶，死面大，紀著資小成去資戲面和的發行的止的接來，南生不能野：政生企性班們教求給學就得受再球也生克決的金長冷成。

標題、文章內容當然還無意義wwww

調整排版

恩～沒分段了？這是因為HTML會忽略空白，如過要換行還需要使用<br/>。當然你可以在變數內容這麼加，然後在模板將顯示的部份改為{!! $content !!}，或是也可以用<pre>來做，像是把@section('body')改成：

@section('body')
    <h1>{{$title}}</h1>
    <pre>{{$content}}</pre>
@endsection

使用Markdwon來儲存文章

使用{!! $content !!}有安全性的疑慮，如果允許別人寫文章，可能會被插入惡意的JS；用<pre>當然也可以，但總感覺有謝不太靈活。我喜歡用Markdown寫文章，存文章當然也想要用Markdown。有沒有辦法把Markdown漂亮的顯示在網頁上呢？有的，Laravel Markdown是一個擴充blade模板的而外套件。安裝設定好以後可以像是@markdown('# Foo')插入Markdown語法；或是：

@markdown
# Bar
@endmarkdown

甚至可以套過baz2.md.php或是baz3.md.blade.php的檔名作為模板名稱。

不過之後我想把文章儲存在資料庫，還想提供一個建議的網頁進行編輯文章。說穿了，其實是我自己沒用過。所以接下來分享一個無須設定，只要安裝就好的作法。

parsedown是給PHP用的Markdown相關套件。除了可以渲染Markdown內容，同時可會避免輸出有風險片段，避免XSS攻擊。當然，同樣的也提供危險模式。

安裝parsedown

要使用parsedown非常簡單，只要先像這樣安裝：

composer require erusev/parsedown

然後就可以在PHP這麼使用：

$Parsedown = new Parsedown();

echo $Parsedown->text('Hello _Parsedown_!'); # prints: <p>Hello <em>Parsedown</em>!</p>

在產生文字前，可以用$Parsedown->setSafeMode(true);和$Parsedown->setMarkupEscaped(true);降低安全性，允許輸出js程式。

使用parsedown

要使用parsedown，當然可以透過@php的方式：

@section('body')
    <h1>{{$title}}</h1>
    <pre>{{$content}}</pre>

    @php
    $Parsedown = new Parsedown();

    echo $Parsedown->text('Hello _Parsedown_!')
    @endphp
@endsection

不過這樣就把邏輯和頁面混在一起了。我們改在路由處理：

Route::group(['prefix' => 'blog',
              'as' => 'blog/',
              'namespace' => 'Blog', ],

             function(){
                  Route::get('/post/{post_id}', function($post_id){
                      $title = '日的及度加機子魚年';
                      $content = '身主一........';

                      $Parsedown = new Parsedown();
                      $content = $Parsedown->text($content);

                      return view('blog.post', [
                          "title" => $title,
                          'content' => $content,
                      ]);
                  });
              });

透過先在$content內容交由$Parsedown轉譯，在給模板渲染輸出。喔！對了，模板內容記得改成：

@section('body')
    <h1>{{$title}}</h1>
    {!! $content !!}
@endsection

套過@Parsedown的保護，應該無須擔心{!! @content !!}輸出的結果。也必要使用{!! !!}來讓轉譯後的結果正確的顯示在瀏覽器頁面上。

js中也有多個即時轉譯Markdown的套件，像是markdown-js。你也透過直接輸出Markdown，再在由js進行翻譯轉出達到同樣效果。

Vue.js裡頭似乎有Markdwon的編輯器。

填入Markdown文章

現在$content還是亂數文章的內容，從網頁上看看不太出什麼Markdown帶來的效果。當然，你可以透過[範例](Quick Markdown Example)來測試(不過直接複製使用你可能會遇到PHP語法錯誤的問題)。既然剛才是亂數文章，那麼這次也來亂數產生Markdown，試著將$content改成：

# Nisi virgine

## Fuerant centum

Lorem markdownum Orci! Non numine, tenax Lacon natas iubet ferox hostia posita
regnumque hanc manu eripui tibia.

    rom += widget(sram_namespace_memory(web_online_troubleshooting,
            throughputAutoresponderCopyright, dvHoneypotTrash) - script_dock,
            ict + cable(design, 4), 5);
    ics_interlaced.fi += cybersquatter + null_raw_dv.lion_power_uddi(18);
    if (supply != tftpDpi) {
        floppy_webmail -= runtime(networkApplet, beta, 62);
        recursion_hardening_grep(-1 + lampOptical, 5, -2);
        cmos += it(prebindingCronKeywords);
    } else {
        compiler = 3;
        algorithmTtlCross(master_raid, program_antivirus_metadata *
                contextualIpod, drop);
        vpnFile(rpm_jsp(dtd_task_secondary, -2, simm));
    }
    if (throughput_trackball_media <= user) {
        meta_windows -= netbios_smartphone_osd(91 - module, payloadRemote);
        ocr_mode = prebindingSpoolingRecycle.volume_rgb_shift(import + 1);
        rdramWinsThin = mirrored(import_only_key.gpu(fiber, isdnJreOffice),
                optical(ivr, input_pinterest, -2));
    } else {
        key(key(keylogger, day_core_cybercrime));
    }
    if (data_hypermedia < cron(encodingWins, ctrAddress + proxyBacksideVersion,
            apacheCgiView)) {
        clip_gate_zebibyte(directoryPretestPing * windows, diskMotion, 38);
    }

## Ast pompa iamque fuit profanam

Decipiet inpleat acrior: capienda frondes. Iram hic, *Tartara*. A gloria
lapidosas arva, numerem. Nec ora pectoraque magna Priamidenque quinos vada tergo
ecce vires nititur tot in egreditur *perdiderat habitantque* capillos tellus.

## Forcipe magnanimus populos

Oriens veneno contactu; per mille in vestigia: montes ramos stirpe spemque
pectora! Ionium excutit carinae, cornuque ore pompa et modo diu [est parilique
Troia](http://nunc.io/) et munere. Non ipsa patientia dixit.

## Et possent unda dolore capiti

Palati more deae fecissem hirsutaque Haemoniae ubi a madidis ponere Troades;
temptata rapiunt cuspidis. Aevi *canos torreri* intertextos erroribus sine
sulcis. Pollens dum magno [laudatis](http://ignes.io/) cruentior, huius
[hic](http://www.satis.io/trahebatpudici).

Quod sum, demisit corpore. Direptos capacibus qua nec fidem pulsavere fugiunt
habendum ceciderunt verum.

## Iamque cutis

Es dolor: care de viam vocatus terra. Nostras quam. Sunt suntque flumine sol
grates furor scilicet iacent canentis iuncisque sibi. Tibi superis festis.

Demittite quam qui, ad dum adspicit vulnera liquor moventur. Aequor conpellat
curvamine *dixi vim* servat postponere et fata tangeret sternit dubitat et Minos
fortis, foret antiquarum. Sanguine tosta adunco, claudit quem tulit fatali
redolentia rogat, dona favet taurorum meae. Limus et cernunt veribus dolore quam
ultimus. Perseus sinistrum comitata iustissima iacet.

最後，再瀏覽看看http://localhost/blog/post/12。完美，收工。